<script lang="ts" setup>
import { computed, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { Html2Canvas, ItemCard, SvgIcon } from '@/components'
import List from '@/custom-components/config'
import type { CustomComponent } from '@/type'

defineProps({
  shrinkComponent: {
    type: Boolean,
    default: false,
  },
})

const componentsList = List || []
const activeComponentIndex = ref(0) // 选择组件 index
const activeLayerIndex = ref(0) // 选择 类型 index

const layerList = computed(() => {
  return [
    {
      name: '全部',
      components: [],
      value: 'all',
    },
    ...(List || [])[activeComponentIndex.value].list,
  ]
})

function selectComponentList(index: number) {
  activeComponentIndex.value = index
  activeLayerIndex.value = 0
}

const chartList = computed(() => {
  if ((layerList.value[activeLayerIndex.value] as any).value === 'all') {
    const list: any[] = []
    layerList.value.forEach((o: any) => {
      if (o.components.length) {
        list.push(...o.components)
      }
    })
    return list
  }

  return layerList.value[activeLayerIndex.value]?.components || []
})

function selectLayerIndex(index: number) {
  activeLayerIndex.value = index
}

const searchValue = ref('')

function handleDragStart(e: any, item: CustomComponent) {
  const itemStr = JSON.stringify(item)
  e.dataTransfer.setData('component', itemStr)
}
</script>

<template>
  <div
    class="component-control-container"
    :class="!shrinkComponent ? 'shrink-component' : ''"
  >
    <div class="top">
      <span class="left-box">
        组件
        <SvgIcon name="chart" />
      </span>
      <span class="right-box mr-2">
        <el-input
          v-model="searchValue"
          size="small"
          placeholder="搜索组件"
          :suffix-icon="Search"
        />
      </span>
    </div>
    <div class="content">
      <div v-loading="!componentsList" class="components-list px-2">
        <el-card
          v-for="(item, index) in componentsList"
          :key="item.title"
          body-class="p-2 flex items-center justify-center flex-col"
          class="mt-4"
          :class="activeComponentIndex === index ? 'active text-[var(--el-color-white)]' : ''"
          @click="selectComponentList(index)"
        >
          <SvgIcon :name="item.icon" size="1.25em" class="mb-1" />
          <span>{{ item.title }}</span>
        </el-card>
      </div>
      <ul class="layer-list">
        <li
          v-for="(item, index) in layerList"
          :key="item.name"
          :class="activeLayerIndex === index ? 'active text-[var(--el-color-white)]' : ''"
          @click="selectLayerIndex(index)"
        >
          {{ item.name }}
        </li>
      </ul>
      <ul class="chart-list">
        <li
          v-for="(item, index) in chartList"
          :key="index + item.id"
          draggable="true"
          :data-index="index"
          @dragstart="handleDragStart($event, item)"
        >
          <ItemCard :btns="['cancel', 'enLarge', 'reduce']">
            <template #headerRight>
              <span>{{ item.label }}</span>
            </template>
            <div class="layer-content">
              <Html2Canvas :component-data="item" />
              <!-- <svg-icon :name="item.icon" style="width: 90%; height: 90%"></svg-icon> -->
            </div>
          </ItemCard>
        </li>
      </ul>
    </div>
  </div>
</template>

<style src="./index.scss" lang="scss" scoped></style>

<style lang="scss">
.component-control-container {
  .content {
    .item-card {
      .el-card__header {
        padding: 4px 10px;
        .btn {
          height: 8px;
          width: 8px;
        }
      }
    }
  }
}
</style>
